<template>
	<view>

		<view class="dp-userinfo">
			<view class="banner">
				<view class="banner-border">
					<view class="info">
						<view class="f1">
							<!-- <image :src="data.userinfo.headimg" background-size="cover" class="headimg"
							@tap="weixinlogin" /> -->
							<image :src="data.userinfo.headimg" background-size="cover" class="headimg"
								@click="loginOrSet" />
						</view>
						<view class="">
							<view class="nickname">
								{{ data.userinfo.nickname
              }}<text v-if="params.midshow == '1'"
									style="font-size: 26rpx; padding-left: 10rpx">(ID:{{ data.userinfo.id }})</text>
							</view>

							<view class="user-level" @tap="openLevelup" data-levelid="" v-if="params.levelshow == 1">
								<image class="level-img" :src="data.userlevel.icon" v-if="data.userlevel.icon" />
								<view class="level-name">{{ data.userlevel.name }}</view>
							</view>
							<view class="endtime" v-if="data.userinfo.levelendtime > 0">
								到期时间：{{
                dateFormat(data.userinfo.levelendtime, "Y年m月d日")
              }}</view>
							<!---->
						</view>
						<!-- <view v-show="mid" class="userset" @tap="goto" data-url="/pagesEchart/find/msgcenter">
						<view class="t2" v-if="vip_info.messageNum > 0" :style="{ 'background-color': t('color1') }">
							{{ vip_info.messageNum > 99 ? "99+" : vip_info.messageNum }}
						</view>
						<image :src="static_url + '/static/img/message.png'" class="img" />
					</view> -->
<!-- 						<view class="userset" @tap="goto" data-url="/pagesExt/my/set">
							<image src="../../static/img/set2.png" class="img" />
						</view> -->
						  <view
						            class="userupimg"
						            @click="openLevelup2"
						            :data-levelid="nextlevelinfo.level_id"
						            v-if="nextlevelinfo && nextlevelinfo.level_id"
						          >
						            <image
						              :src="nextlevelinfo.can_apply_level_pic_banner"
						              class="img"
						              mode="widthFix"
						            />
						          </view>
					</view>
					<!-- <view class="user-lv">
						<view class="">
							任意消费，可升级到<text style="color: #B72609;">v1</text>
						</view>
						<view class="">
							查看权益>
						</view>
					</view>
					<view class="lv-border-bottom">

					</view> -->
					<view class="custom_field">
						<view class="item" v-if="params.moneyshow == 1" data-url="/pages/money/recharge" @tap="goto">
							<text class="t1">{{ t("余额") }}</text>
							<text class="t2" style="color: #000;">{{
              data.userinfo.money ? data.userinfo.money : 0
            }}</text>

						</view>

						<!-- <view class="item" data-url="/pagesExt/my/favorite" @tap="goto">
			   <text class="t1">收藏</text>
            <text class="t2" :style="{ color: t('color1') }">{{
              data.userinfo.favoritecount ? data.userinfo.favoritecount : 0
            }}</text>
           
          </view> -->
						<view class="item" data-url="/pagesExt/my/scorelog" @tap="goto">
							<text class="t1">积分</text>
							<text class="t2" style="color: #000;">{{ datacount.score ? datacount.score : 0 }}</text>
						</view>


						<view class="item" data-url="/pagesExt/coupon/mycoupon" @tap="goto">
							<text class="t1">券包</text>
							<text class="t2" style="color: #000;">{{
              data.userinfo.couponcount ? data.userinfo.couponcount : 0
            }}</text>

						</view>
					</view>
				</view>
			</view>
		</view>
<!-- 		<view class="cz-main" @tap="goto" data-url="/pages/money/recharge" :style="{ 'background-color': t('color1') }">
			<view class="cz-btn"> 充 值 </view>
		</view> -->

<!-- 		<view v-show="mid && vip_info && vip_info.vip_card_pay" class="vip-main" @tap="goto"
			data-url="/pagesExt/vip/vip">
			<image :src="vip_info && vip_info.vip_card_image" mode="aspectFill‌‌" />
		</view> -->

		<view class="dp-userinfo-order">
			<view class="head">
				<text class="f1">我的订单</text>
				<view class="f2" @tap="goto" data-url="/pagesExt/order/orderlist"><text>全部订单</text>
					<image src="/static/img/arrowright.png" class="image" />
				</view>
			</view>
			<view class="content">
				<view class="item" @tap="goto" data-url="/pagesExt/order/orderlist?st=0">
					<image :src="
              static_url + '/static/img/order11.png?timestamp=' + Date.now()
            " class="image" />
					<view class="t2" v-if="data.orderinfo.count0 > 0" :style="{ 'background-color': t('color1') }">
						{{ data.orderinfo.count0 }}
					</view>
					<text class="t3">待付款</text>
				</view>
				<view class="item" @tap="goto" data-url="/pagesExt/order/orderlist?st=1">
					<image :src="
              static_url + '/static/img/order22.png?timestamp=' + Date.now()
            " class="image" />
					<view class="t2" v-if="data.orderinfo.count1 > 0" :style="{ 'background-color': t('color1') }">
						{{ data.orderinfo.count1 }}
					</view>
					<text class="t3">待发货</text>
				</view>
				<view class="item" @tap="goto" data-url="/pagesExt/order/orderlist?st=2">
					<image :src="
              static_url + '/static/img/order33.png?timestamp=' + Date.now()
            " class="image" />
					<view class="t2" v-if="data.orderinfo.count2 > 0" :style="{ 'background-color': t('color1') }">
						{{ data.orderinfo.count2 }}
					</view>
					<text class="t3">待收货</text>
				</view>
				<view class="item" @tap="goto" data-url="/pagesExt/order/orderlist?st=3">
					<image :src="
              static_url + '/static/img/order44.png?timestamp=' + Date.now()
            " class="image" />
					<view class="t2" v-if="data.orderinfo.count3 > 0" :style="{ 'background-color': t('color1') }">
						{{ data.orderinfo.count3 }}
					</view>
					<text class="t3">已完成</text>
				</view>
				<view class="item" @tap="goto" data-url="/pagesExt/order/refundlist">
					<image :src="
              static_url + '/static/img/order55.png?timestamp=' + Date.now()
            " class="image" />
					<view class="t2" v-if="data.orderinfo.count4 > 0" :style="{ 'background-color': t('color1') }">
						{{ data.orderinfo.count4 }}
					</view>
					<text class="t3">售后</text>
				</view>
				<!-- <view class="item" @tap="goto" data-url="/pagesExt/order/orderlist?st=0">
					<image src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250303/8e5d3c6ae1113eda09fcda6b8c19529b.png" class="image" />
					<view class="t2" v-if="data.orderinfo.count0 > 0">{{ data.orderinfo.count0 }}</view>
					<text class="t3">优惠券</text>
				</view> -->
			</view>

			<view class="account-box" v-if="mp_info.is_subscribe == 1 &&  mp_info.info.subscribe_title">
				<view class="account-box-left">
					<view class="">
						<image class="logo" :src="initdata.logo" mode=""></image>
					</view>
					<view class="account-text">
						<view class="">
							{{ mp_info.info.subscribe_title }}
						</view>
						<view class="">
							{{ mp_info.info.subscribe_tips }}
						</view>
					</view>
				</view>

				<view class="account-box-right" @tap="goToWebView">
					<view class=""> 去关注 </view>
					<image class="arrow-right" src="/static/img/arrowright.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="benefits-center" v-if="isRights">
			<view class="heade">
				<view class="left">
					<image class="icon" :src="static_url + '/static/img/quanyi.png'"></image>
					<text class="title">权益中心</text>
				</view>
				<text class="subtitle">衣食住行专享福利</text>
				<view class="right" @tap="goSin">
					<view class="btn">去签到 </view>
					<image src="/static/img/arrowright.png" class="image" />
				</view>
			</view>
			<view class="content">
				<view class="item" data-url="/pagesExt/my/scorelog" @tap="goto">
					<text class="num">{{ datacount.score ? datacount.score : 0 }}</text>
					<text class="label">积分</text>
				</view>
				<view class="item" data-url="/pagesExt/coupon/mycoupon" @tap="goto">
					<!-- <text class="bold">领好券</text> -->
					<text class="num">{{
            datacount.couponcount ? datacount.couponcount : 0
          }}</text>
					<text class="label">优惠券</text>
				</view>
				<view class="item" data-url="/pagesSocial/gift/index" @tap="goto">
					<!-- <text class="bold">逛好礼</text> -->
					<text class="num">{{
            datacount.giftcount ? datacount.giftcount : 0
          }}</text>
					<text class="label">我的礼物</text>
				</view>
				<view class="item" data-url="/pagesSocial/winning/index" @tap="goto">
					<text class="num">{{
            datacount.prizecount ? datacount.prizecount : 0
          }}</text>
					<text class="label">中奖记录</text>
				</view>
			</view>
		</view>
		<!-- <button class="kefu-container" open-type="contact" v-if="showkefu">
      <image class="kefu" :src="static_url + '/static/img/kefu_icon.png'" />
    </button> -->
		<!-- <view class="kefu-container">
		<image class="kefu" @click="openkefu" :src="static_url + '/static/img/kefu_icon.png'" />
		<view v-if="totalUnreadCount > 0" class="unread-badge">
			{{ totalUnreadCount > 99 ? '99+' : totalUnreadCount }}
		</view>
	</view> -->
		<uni-popup ref="popup" type="bottom" border-radius="20rpx">
			<view class="pop_kefu">
				<view class="pop_kefulist" v-if="kefuList.length > 0">
					<view v-for="(item, index) in kefuList" :key="index" @click="tokefu(item)" class="pop_list_item">
						<image class="pic" :src="item.headimg" mode="aspectFill"></image>
						<view class="name">{{ item.nickname }}</view>
						<view v-if="item.no_read_count > 0" class="badge">
							{{ item.no_read_count > 99 ? "99+" : item.no_read_count }}
						</view>
					</view>
				</view>
				<view class="load_kefu" v-else>
					<uni-load-more status="loading" iconSize="28"></uni-load-more>
				</view>
			</view>
		</uni-popup>
		<loading v-if="loading"></loading>
	</view>
</template><script>
let videoAd = null;
var app = getApp();
export default {
  data() {
    return {
      textset: app.globalData.textset,
      platform: app.globalData.platform,
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      initdata: app.globalData.initdata,
      task_banner: false,
      loading: false,
      choujiang_id: 0,
      sy_count: "",
      videoAd: "",
      vip_info: app.globalData.vip_info,
      nextlevelinfo: app.globalData.nextlevelinfo,
      mp_info: {},
      isRights: false,
      datacount: {},
      mid: 0, //
      kefuList: [],
      totalUnreadCount: 0,
      showkefu: "",
    };
  },
  props: {
    params: {},
    data: {},
  },
  mounted() {
    // console.log(this.data)
    // console.log(this.params)
    var mid = uni.getStorageSync("mid");
    this.mid = mid;
    this.showkefu = mid;
    if (mid) {
      this.getmp();
      this.getEntry();
      this.getdatacount();
      this.getkefulist();
    }
  },
  methods: {
    openLevelup: function (e) {
      return;
      var levelid = e.currentTarget.dataset.levelid;
      if (parseInt(this.params.levelclick) !== 0) {
        app.goto("/pagesExt/my/levelinfo?id=" + levelid);
      }
    },

    openLevelup2: function (e) {
      var levelid = e.currentTarget.dataset.levelid || 0;
      app.goto("/pagesExt/my/levelpay2?id=" + levelid);
    },
    goToWebView() {
      const url = this.mp_info.info.subscribe_url;
      uni.navigateTo({
        url: `/pagesZone/webview/index?url=${encodeURIComponent(url)}`,
      });
    },
    getdatacount() {
      app.get("MemberCenter/datacount", {}, (res) => {
        if (res.code == 200) {
          this.datacount = res.res;
        } else {
          app.error(res.msg);
        }
      });
    },
    getmp() {
      app.get("my/getmpsubscribe", {}, (res) => {
        if (res.status == 200) {
          this.mp_info = res.res.mp;
        } else {
          app.error(res.msg);
        }
      });
    },
    getdata() {
      var that = this;
      console.log(this.data.userinfo);
    },
    goSin() {
      app.goto("/pagesSocial/rights/rights");
    },
    getEntry() {
      var that = this;
      // app.get('index/getEntranceSet', {
      // 	key: 'rights'
      // }, function (res) {
      // 	if (res.status == 1) {
      // 		if (res.data) {
      // 			that.isRights = true;
      // 		}
      // 	} else {
      // 		app.error(res.msg)
      // 	}
      // });
      app.get("MemberCenter/getset", {}, function (res) {
        if (res.code == 200) {
          console.log(res);
          if (res.res.set.is_open == 1) {
            that.isRights = true;
          } else {
            that.isRights = false;
          }
        } else {
          that.isRights = false;
        }
      });
    },
    loginOrSet() {
      console.log(uni.getStorageSync("mid"));
      if (uni.getStorageSync("mid")) {
        app.goto("/pagesExt/my/set");
      } else {
        this.getEntry();
      }
    },
    //#region 客服相关
    openkefu() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open("top");
      this.getkefulist();
    },
    getkefulist() {
      let that = this;
      app.get("kefu/getList", {}, function (res) {
        if (res.code == 200) {
          that.kefuList = res.data;
          let totalUnread = res.data.reduce((sum, kefu) => {
            return sum + (kefu.no_read_count || 0);
          }, 0);

          that.totalUnreadCount = totalUnread;
        }
      });
    },
    tokefu(data) {
      if (data.id) {
        app.goto(
          "/pagesChat/chat/index?id=" +
            data.id +
            "&type=1&name=" +
            data.nickname +
            "&headimg=" +
            data.headimg
        );
        this.$refs.popup.close();
        uni.setStorageSync("ChatData", {
          type: "product",
          proid: this.opt.id,
          name: this.product.name,
          pic: this.product.pic,
          sell_price: this.product.sell_price,
          ptype: this.ptype,
        });
      }
    },
  },
};
</script>
<style lang="scss">
	.dp-userinfo {
		position: relative;
		
	}

	.dp-userinfo .banner {

		background-color: rgba(234, 234, 234, 1);

		padding: 20rpx 20rpx 0rpx 20rpx;
		color: #333;
		position: relative;
		box-shadow: inset 0 30rpx 40rpx rgba(0, 0, 0, 0.1);
	}

	.banner-border {
		border: 1px solid #fff;
		border-radius: 10rpx 10rpx 0rpx 0;
		padding: 20rpx;
		
	}

	.user-lv {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;

	}

	.lv-border-bottom {
		height: 12rpx;
		background-color: #fff;
		margin-top: 6rpx;
	}

	.dp-userinfo .banner .info {
		display: flex;
		align-items: flex-end;
		align-items: center;
	}

	.dp-userinfo .banner .info .f1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15rpx 0rpx;
	}

	.dp-userinfo .banner .headimg {
		width: 148rpx;
		height: 148rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		border: 3px solid #eee;
	}

	.dp-userinfo .banner .info {
		margin-left: 20rpx;
		display: flex;
		flex: auto;
	}

	.dp-userinfo .banner .info .nickname {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 34rpx;
		font-weight: bold;
		max-width: 400rpx;
		overflow: hidden;
		white-space: nowrap;
		  position: relative;
		  z-index: 99;
	}

	.dp-userinfo .banner .getbtn {
		width: 120rpx;
		height: 44rpx;
		padding: 0 3px;
		line-height: 44rpx;
		font-size: 24rpx;
		background: #09bb07;
		color: #fff;
		position: absolute;
		top: 76rpx;
		left: 10rpx;
	}

	.dp-userinfo .banner .user-level {
		margin-left: 5px;
		color: #b48b36;
		background-color: #ffefd4;
		margin-top: 2px;
		width: auto;
		height: 36rpx;
		border-radius: 18rpx;
		padding: 0 20rpx;
		display: inline-flex;
		align-items: center;
	}

	.dp-userinfo .banner .user-level .level-img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 3px;
		margin-left: -14rpx;
		border-radius: 50%;
	}

	.dp-userinfo .banner .user-level .level-name {
		font-size: 24rpx;
	}

	.dp-userinfo .banner .user-level image {
		border-radius: 50%;
	}

	.dp-userinfo .banner .usercard {
		position: absolute;
		right: 32rpx;
		top: 28rpx;
		width: 160rpx;
		height: 60rpx;
		text-align: center;
		border: 1px solid #ffb2b2;
		border-radius: 8rpx;
		color: #fc4343;
		font-size: 24rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dp-userinfo .banner .usercard .img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8rpx;
		padding-bottom: 4rpx;
	}

	.dp-userinfo .custom_field {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 16rpx 8rpx;
		padding-top: 0;
		// background: #fff;
	}

	.dp-userinfo .custom_field .item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.dp-userinfo .custom_field .item .t1 {
		color: #101010;
		font-size: 22rpx;
		padding-top: 18rpx;
		padding-bottom: 22rpx;
	}

	.dp-userinfo .custom_field .item .t2 {
		color: #eb544d;
		font-weight: bold;
		font-size: 36rpx;
	}
	
	
	.dp-userinfo .userup {
	  padding: 10rpx;
	  position: absolute;
	  top: 0rpx;
	  right: 0rpx;
	  font-size: 27rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #333;
	}
	
	.dp-userinfo .userupimg {
	  position: absolute;
	  top: 20rpx;
	  right: 20rpx;
	}
	
	.dp-userinfo .userupimg .img {
	  width: 280rpx;
	  // height: 90rpx;
	}
	
	.dp-userinfo .userup .img {
	  margin-left: 8rpx;
	  width: 30rpx;
	  height: 30rpx;
	}


	.dp-userinfo .userset {
		width: 70rpx;
		height: 70rpx;
		padding: 10rpx;
		position: absolute;
		top: 40rpx;
		right: 30rpx;
	}

	.dp-userinfo .userset .t2 {
		display: flex;
		align-items: center;
		justify-content: center;
		background: red;
		color: #fff;
		border-radius: 100rpx;
		padding: 0 10rpx;
		position: absolute;
		top: -4rpx;
		right: 0rpx;
		width: auto;
		height: 35rpx;
		text-align: center;
		z-index: 1;
	}

	.dp-userinfo .userset .img {
		width: 100%;
		height: 100%;
	}

	.dp-userinfo2 {
		width: 100%;
		height: 490rpx;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.dp-userinfo2 .info {
		display: flex;
		margin-top: 60rpx;
		margin-left: 40rpx;
	}

	.dp-userinfo2 .info .headimg {
		width: 108rpx;
		height: 108rpx;
		background: #fff;
		border: 3rpx solid rgba(255, 255, 255, 0.7);
		border-radius: 50%;
	}

	.dp-userinfo2 .info .nickname {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.dp-userinfo2 .info .nickname .nick {
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		max-width: 400rpx;
		overflow: hidden;
		margin-right: 10rpx;
	}

	.dp-userinfo2 .info .nickname .desc {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.6);
		height: 40rpx;
		line-height: 40rpx;
	}

	.dp-userinfo2 .info .nickname .user-level {
		color: rgba(255, 255, 255, 0.6);
		margin-top: 2px;
		width: auto;
		height: 36rpx;
		border-radius: 18rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
	}

	.dp-userinfo2 .info .nickname .user-level .level-img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 3px;
		margin-left: -14rpx;
		border-radius: 50%;
	}

	.dp-userinfo2 .info .nickname .user-level .level-name {
		font-size: 24rpx;
	}

	.dp-userinfo2 .info .nickname .usermid {
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
	}

	.dp-userinfo2 .custom_field {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 36rpx 8rpx;
		margin-top: 20rpx;
	}

	.dp-userinfo2 .custom_field .item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.dp-userinfo2 .custom_field .item .t1 {
		color: rgba(255, 255, 255, 0.6);
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.dp-userinfo2 .custom_field .item .t2 {
		color: #ffffff;
		font-weight: bold;
		font-size: 32rpx;
	}

	.dp-userinfo2 .usercard {
		width: 154rpx;
		height: 54rpx;
		background: #fff;
		border-radius: 27rpx 0 0 27rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		position: absolute;
		top: 140rpx;
		right: 0;
	}

	.dp-userinfo2 .usercard .img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 6rpx;
	}

	.dp-userinfo2 .usercard .txt {
		color: #f4504c;
		font-size: 24rpx;
		font-weight: bold;
	}

	.dp-userinfo2 .userset {
		width: 54rpx;
		height: 54rpx;
		padding: 10rpx;
		position: absolute;
		top: 40rpx;
		right: 30rpx;
	}

	.dp-userinfo2 .userset .img {
		width: 100%;
		height: 100%;
	}

	.dp-userinfo-order {
		background: #fff;
		border-radius: 16rpx;
		position: relative;
		margin: 20rpx;
		padding-bottom: 20rpx;
	}

	.dp-userinfo-order .head {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 16rpx 0;
		border-bottom: 2rpx dashed #999;
		padding: 16rpx 16rpx;
	}

	.dp-userinfo-order .head .f1 {
		flex: auto;
		font-size: 30rpx;
		padding-left: 16rpx;
		font-weight: bold;
		color: #333;
	}

	.dp-userinfo-order .head .f2 {
		display: flex;
		align-items: center;
		color: #999;
		width: 200rpx;
		padding: 10rpx 0;
		text-align: right;
		justify-content: flex-end;
	}

	.dp-userinfo-order .head .f2 .image {
		width: 30rpx;
		height: 30rpx;
	}

	.dp-userinfo-order .head .t3 {
		width: 40rpx;
		height: 40rpx;
	}

	.dp-userinfo-order .content {
		display: flex;
		width: 100%;
		padding: 10rpx 0 10rpx 0;
		align-items: center;
		font-size: 24rpx;
	}

	.dp-userinfo-order .content .item {
		padding: 20rpx 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.dp-userinfo-order .content .item .image {
		width: 50rpx;
		height: 50rpx;
	}

	.dp-userinfo-order .content .item .iconfont {
		font-size: 60rpx;
	}

	.dp-userinfo-order .content .item .t3 {
		padding-top: 16rpx;
		color: #101010;
	}

	.dp-userinfo-order .content .item .t2 {
		display: flex;
		align-items: center;
		justify-content: center;
		background: red;
		color: #fff;
		border-radius: 50%;
		padding: 0 10rpx;
		position: absolute;
		top: 0px;
		right: 20rpx;
		width: 35rpx;
		height: 35rpx;
		text-align: center;
	}

	.parent {
		padding: 20rpx;
		border-radius: 16rpx;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	.parent .parentimg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		z-index: 10;
	}

	.parent .parentimg-tag {
		color: #fff;
		text-align: center;
		margin-top: -20rpx;
		z-index: 11;
		border-radius: 12rpx;
		padding: 2rpx 4rpx;
		position: relative;
		bottom: 2rpx;
	}

	.parent .copyicon {
		width: 26rpx;
		height: 26rpx;
		margin-left: 8rpx;
		position: relative;
		top: 4rpx;
	}

	.parent .f1 {
		position: relative;
	}

	.parent .f2 {
		padding: 0 30rpx;
	}

	.parent .handle-img {
		width: 60rpx;
		height: 60rpx;
	}

	.parent .btn-box {
		padding: 20rpx 0;
	}

	.parent button {
		padding: 0 40rpx;
		color: #fff;
		border-radius: 20rpx;
		line-height: 60rpx;
	}

	.qiuzhi-renzheng {
		color: #eeda65;
		background: #3a3a3a;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		margin: 0 4rpx;
		font-size: 22rpx;
	}

	.qiuzhi-qianyue {
		color: #eeda65;
		background: #3a3a3a;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		margin: 0 4rpx;
		font-size: 22rpx;
	}

	.zhaopin-renzheng {
		color: #eeda65;
		background: #3a3a3a;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		margin: 0 4rpx;
		font-size: 22rpx;
	}

	.task_list {
		background: #fff;
		margin-top: 20rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		margin: 0px 11px 0;
	}

	.task_list .item {
		height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.task_list .item:last-child {
		border-bottom: 0;
		margin-bottom: 20rpx;
	}

	.task_list .f1 {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		align-items: center;
	}

	.task_list .f1 image {
		width: 44rpx;
		height: 44rpx;
	}

	.task_list .f1 span {
		width: 40rpx;
		height: 40rpx;
		font-size: 40rpx;
	}

	.task_list .f2 {
		color: #222;
	}

	.task_list .f3 {
		color: #666;
		text-align: right;
		flex: 1;
	}

	.task_list .f4 {
		width: 40rpx;
		height: 40rpx;
	}

	.endtime {
		margin-top: 12rpx;
		color: #999;
		font-size: 24rpx;
	}

	.cz-main {
		background: #871c87;
		border-radius: 16rpx;
		position: relative;
		margin: 20rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cz-btn {
		color: #fff;
		align-self: center;
	}

	.vip-main {
		margin: 20rpx;
		height: 210rpx;
	}

	.vip-main image {
		border-radius: 16rpx;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	.account-box {
		padding: 20rpx 10rpx;
		margin: 0 20rpx;
		background-color: #f9f9f9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #838383;
	}

	.account-box-left {
		display: flex;
		align-items: center;
	}

	.logo {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.account-text {
		font-size: 24rpx;
	}

	.arrow-right {
		width: 30rpx;
		height: 30rpx;
	}

	.account-box-right {
		display: flex;
		align-items: center;
	}

	.benefits-center {
		background: #ffefcd;
		border-radius: 16rpx;
		overflow: hidden;
		margin: 10px;
	}

	.left {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		padding-right: 30rpx;
		background: linear-gradient(to right, #fff1ce, #ffd2af);
		border-radius: 16rpx 0 50rpx 0rpx;
		box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.1);
		clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
		height: 80rpx;
	}

	.benefits-center .heade {
		display: flex;
		align-items: center;
		background: linear-gradient(to right, #fff1ce, #ffe3c6);
		position: relative;
		padding-bottom: 50rpx;
	}

	.benefits-center .icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.benefits-center .title {
		font-weight: bold;
		font-size: 32rpx;
		color: #924800;
	}

	.benefits-center .subtitle {
		font-size: 24rpx;
		color: #d46b08;
		margin-left: 10rpx;
	}

	.benefits-center .right {
		position: absolute;
		right: 10rpx;
		display: flex;
		align-self: center;
		justify-content: center;
	}

	.benefits-center .right .btn {
		font-size: 22rpx;
		color: #fff;
		background: #ff5b57;
		padding: 5rpx 15rpx;
		border-radius: 20rpx;
	}

	.benefits-center .right .image {
		width: 30rpx;
		height: 30rpx;
		margin: 5rpx 0;
	}

	.benefits-center .content {
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		border-radius: 16rpx;
		position: relative;
		background-color: #fff;
		z-index: 1;
		margin-top: -50rpx;
	}

	.benefits-center .item {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.benefits-center .num {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.benefits-center .bold {
		font-weight: bold;
		font-size: 28rpx;
		color: #333;
	}

	.benefits-center .label {
		margin-top: 15rpx;
		font-size: 24rpx;
		color: #666;
	}

	.kefu-container {
		position: fixed;
		right: 30rpx;
		bottom: 17vh;
		width: 80rpx;
		height: 80rpx;
		z-index: 99;
	}

	/* 客服图标 */
	.kefu {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 50%;

		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
	}

	/* 未读徽章（绝对定位到右上角） */
	.unread-badge {
		position: absolute;
		top: -12rpx;
		/* 向上偏移 */
		right: -20rpx;
		/* 向右偏移 */
		min-width: 36rpx;
		height: 36rpx;
		background-color: #e60012;
		/* 红色背景 */
		color: white;
		border-radius: 18rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
		z-index: 100;
		/* 确保徽章在图标上方 */
	}

	.pop_kefu {
		.load_kefu {
			background-color: #fff;
			width: 80vw;
			height: 20vh;
			text-align: center;
			margin: 0 auto;
			margin-bottom: 100rpx;
			border-radius: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.pop_kefulist {
			background-color: #fff;
			margin: 0 auto;
			margin-bottom: 130rpx;
			border-radius: 60rpx;
			width: 80vw;

			.pop_list_item {
				display: flex;
				align-items: center;
				gap: 20rpx;
				padding: 20rpx;
				border-bottom: #e7e7e7 2rpx solid;

				.pic {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.name {
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				&:last-child {
					border-bottom: none;
				}

				.badge {
					min-width: 36rpx;
					height: 36rpx;
					background-color: #e60012;
					color: white;
					border-radius: 18rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 6rpx;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
				}
			}
		}
	}
</style>